<template>
	  <view class="container" >
		 <view class="login-icon" >
			  <image class="login-img" src="@/static/img/login_bg.png"></image> 
		  </view>
		  
		  <view class="login-from" v-if="true">
			  <text class="title">基于uniapp的护照识别系统</text>
			  
			  <!--  账号 -->
			  <view class="inputView">
				  <image class="nameImage" src="@/static/img/login_name.png"></image>
				  <input class="inputText" v-model="user.username" placeholder="请输入账号"/>
			  </view>
			  <!-- 密码 -->
			  <view class="inputView">
			  	   <image class="nameImage" src="@/static/img/login_password.png"></image>
			  	   <input class="inputText" v-model="user.password" password="true"  placeholder="请输入密码"/>
			  </view>
 
			  <!-- 登录按钮 -->
			  <view class="loginBtnView" @click="login">
				  立即登录
			  </view>
			  
			  <!-- 注册按钮 -->
			  <view class="registerBtnView" @click="register">
				  立即注册
			  </view>
		  </view>
		  
		  <view>
		  		<u-toast ref="uToast" />
		  </view>
	  </view>
</template>
 	
<script>
	import Vue from 'vue'
	import Router from '@/router'
	export default {
		data(){
			return{
				user:{
					username:"",
					password:"",
					
				},	
				loginOK:0 //用户第一次登录是0，登录过后变成1，第二次以后自动登录
			}
		},
		// 自动登录的制作
		async onLoad(){
			this.user.username = await uni.getStorageSync("username")
			this.user.password = await uni.getStorageSync("password")
			this.loginOK = await uni.getStorageSync("loginOK")
			if(this.loginOK === 6)
			{
				this.login()
			}
		},
		methods:{
			 login(username,password){
				 username = this.user.username;
				 password = this.user.password;
				 this.$axios.get('/login', {
								params: {
								  username: username,
								  password: password,
								}
							  })
							.then(response=>{
								let message=response.data.message;
								if(response.data.code!=200){
									uni.showModal({
											title: "提示",
											content: message,
											showCancel:false,
											success: function (res) {
												if (res.confirm) {
													console.log('用户点击确定');
												} else if (res.cancel) {
													console.log('用户点击取消');
												}
											}
										});
								}else{
								uni.showToast({
												title: message,
												icon: 'success',    
												duration: 2000    //持续时间为 2秒
											})
								this.timer = setTimeout(()=>{   //设置延迟执行
									let user =response.data.data;
									uni.setStorageSync('user',user)
									uni.redirectTo({url:'/pages/index/main'});//关闭本页面然后路由跳转;

								},2000);
								}
								console.log(response)
							})
							.catch(error=>{
								let message=response.data.message;
								uni.showModal({
										title: "提示",
										content: message,
										showCancel:false,
										success: function (res) {
											if (res.confirm) {
												console.log('用户点击确定');
											} else if (res.cancel) {
												console.log('用户点击取消');
											}
										}
									});
								console.log(error);
							});
			},register(){
				uni.redirectTo({url:'/pages/index/register'});//关闭本页面然后路由跳转;
			 },    
	
		}	
	}
</script>
 
<style>
/* #ifndef H5 */
page {
	height: 100%;
	background-color: #eeeeee;
}
/* #endif */
</style>
 
<style lang="scss" scoped>
	page{ 
	 height: 100%; 
	} 
	  
	.container { 
	 height: 100%; 
	 display: flex; 
	 padding: 0; 
	 box-sizing: border-box; 
	   /*登录图片*/
	   .login-icon{ 
		 height: 100%;
		 .login-img{
		  width: 100%;
		 		position: fixed;
				width: 100%;
				height: 100%;
				top: 0;
				left: 0;
				z-index: -1;
		 } 
	   } 
	   
	   /*表单内容*/
	   .login-from view:nth-child(2){
	   			  margin-top: 50rpx;
	   }
	   .login-from view:nth-child(3){
	   			  margin-top: 50rpx;
	   }
	   .login-from { 
	    margin-top: 100rpx; 
	   	margin-left: 47rpx;
	    position: relative;
		text-align: center;
	    height:748rpx;
	   	width: 656rpx;
			   .title{
				
				margin-top: -50rpx;
				font-size: 30rpx;
				
			   }
	   		  .inputView {
	   		   background-color: #FFFFFF; 
	   		   display: flex;
	   		   height: 80rpx;
	   		   border-radius: 6rpx;
	   		   width: 656rpx;
	   		        /*输入框*/
	   			   .nameImage{ 
	   				margin-left: 22rpx; 
	   				margin-top: 35rpx;
	   				width: 24rpx; 
	   				height: 24rpx
	   			   }  
	   			   .inputText {
					text-align: left;
	   				margin-left: 25rpx; 
	   				margin-top: 20rpx;
	   				color: #727272; 
	   				font-size: 30rpx
	   			   }  
	   		  } 
	   		  .loginBtnView{
	   			  margin-top: 45rpx;
	   			  background: #3399fe;
	   			  padding-top: 13rpx;
	   			  text-align: center;
	   			  font-size: 32rpx;
	   			  letter-spacing:4rpx;
	   			  color: #f5ffed;
	   			  height: 60rpx;
	   			  width: 300rpx;
	   			  border-radius: 10rpx;
	   			  
	   		  }
			  
			.registerBtnView{
				  margin-top: -72rpx;
				  margin-left: 360rpx;
				  background: burlywood;
				  padding-top: 13rpx;
				  text-align: center;
				  font-size: 32rpx;
				  letter-spacing:4rpx;
				  color: #f5ffed;
				  height: 60rpx;
				  width: 300rpx;
				  border-radius: 10rpx;
				   			  
			}	
	   		  
	   		     
	   } 
	} 
</style>